<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form
        ref="formValidate"
        :model="formValidate"
        :rules="rules"
        label-width="200px"
        class="demo-promoterForm"
      >
        <el-form-item :aria-atomic="$t('courierservices')" prop="mer_from_com">
          <el-select
            v-model="formValidate.mer_from_com"
            :placeholder="$t('please100')"
            class="filter-item selWidth mr20"
            @change="getDumpList('')"
          >
            <el-option
              v-for="item in deliveryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('electronicsheet')" prop="mer_config_temp_id">
          <el-select
            v-model="formValidate.mer_config_temp_id"
            :placeholder="$t('please106')"
            class="filter-item selWidth mr20"
          >
            <el-option
              v-for="item in dumpList"
              :key="item.temp_id"
              :label="item.title"
              :value="item.temp_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('please117')" prop="mer_config_siid">
          <el-input
            v-model="formValidate.mer_config_siid"
            :placeholder="$t('please118')"
          />
        </el-form-item>
        <el-form-item :label="$t('nameofsender')" prop="mer_from_name">
          <el-input
            v-model="formValidate.mer_from_name"
            :placeholder="$t('please101')"
          />
        </el-form-item>
        <el-form-item :label="$t('senderstelephone')" prop="mer_from_tel">
          <el-input
            v-model="formValidate.mer_from_tel"
            :placeholder="$t('please102')"
          />
        </el-form-item>
        <el-form-item :label="$t('returnaddress')" prop="mer_from_addr">
          <el-input
            v-model="formValidate.mer_from_addr"
            type="textarea"
            :placeholder="$t('please103')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('formValidate')">{{
            $t("submit")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { getdumpLst, updatedumpDataApi, getdumpDataApi } from "@/api/setting";
import { expressLst } from "@/api/order";
export default {
  name: "Index",
  data() {
    return {
      formValidate: {
        mer_config_temp_id: "",
        mer_from_com: "",
        mer_from_name: "",
        mer_config_siid: "",
        mer_from_tel: "",
        mer_from_addr: "",
      },
      mer_config_temp_id: "",
      deliveryList: [],
      dumpList: [],
      loading: false,
      rules: {
        mer_from_com: [
          { required: true, message: this.$t("please100"), trigger: "change" },
        ],
        mer_config_temp_id: [
          { required: true, message: this.$t("please106"), trigger: "change" },
        ],
        mer_from_name: [
          { required: true, message: this.$t("please101"), trigger: "blur" },
        ],
        mer_config_siid: [
          { required: true, message: this.$t("please118"), trigger: "blur" },
        ],
        mer_from_tel: [
          { required: true, message: this.$t("please102"), trigger: "blur" },
          {
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: this.$t("please104"),
            trigger: "blur",
          },
        ],
        mer_from_addr: [
          { required: true, message: this.$t("please103"), trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
    this.getExpressLst();
  },
  methods: {
    // 获取快递公司列表
    getExpressLst() {
      expressLst()
        .then((res) => {
          this.deliveryList = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 获取电子面单列表
    getDumpList(type) {
      getdumpLst({ com: this.formValidate.mer_from_com })
        .then((res) => {
          this.dumpList = res.data.data;
          if (res.data.data.length) {
            this.formValidate.mer_config_temp_id = this.mer_config_temp_id;
          } else {
            this.formValidate.mer_config_temp_id = "";
          }
          if (type != "first") this.formValidate.mer_config_temp_id = "";
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    getData() {
      getdumpDataApi()
        .then((res) => {
          this.formValidate = res.data;
          this.mer_config_temp_id = res.data.mer_config_temp_id;
          this.formValidate.mer_config_temp_id = "";
          if (res.data.mer_from_com) {
            this.getDumpList("first");
          }
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },

    submitForm(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          updatedumpDataApi(this.formValidate)
            .then((res) => {
              this.$message.success(res.message);
            })
            .catch((res) => {
              this.$message.error(res.message);
            });
        } else {
          return;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.selWidth {
  width: 300px;
}
.item-text {
  display: inline-block;
  margin-left: 30px;
  color: #606266;
  .title {
    font-weight: bold;
  }
}
.font-red {
  color: #ff4949;
}
</style>
